<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style type="text/css">
        div{
            width:900px;
            height:400px;
            margin:0 auto;
        }
        div img{
            width:900px;
            height:400px;
        }
    </style>
    <script type="text/javascript">

        function init(){
            // window.setTimeout(changeImg,2000);//延迟2秒调用一次changeImg方法。
            window.setInterval(changeImg,2000);//循环，每隔2秒调用一次changeImg方法。
        }
        var pathArr = new Array(
            "img/1.jpg",
            "img/1.png",
            "img/2.jpg",
            "img/2.png"
        );
        var index = 0;
        function changeImg(){
            nextImg();
        }
        function preImg(){
            myimg = document.getElementById("myimg");
            index--;
            if(index < 0){
                index = pathArr.length-1;
            }
            myimg.src = pathArr[index];
        }
        function nextImg(){
            myimg = document.getElementById("myimg");
            index++;
            if(index >= pathArr.length){
                index = 0;
            }
            myimg.src = pathArr[index];
        }
    </script>
</head>
<body onload="init()">
    <p align="center">
        <button onclick="preImg()">上一张</button>
        <button onclick="nextImg()">下一张</button>
    </p>
    <div>
        <img src="img/1.png" id="myimg" />
    </div>
</body>
</html>